<template>
  <div class="model-container">
    <div class="listName">ICON管理</div>

    <el-card style="margin-top: 10px">

      <div class="table-wrapper">

        <el-table v-loading="!dataOption" :data="dataOption" stripe border empty-text="暂无数据" @selection-change="changeFun">

          <el-table-column align="center" width="55" label="序号" type="index" />

          <el-table-column align="center" prop="typeName" label="位置" />

          <el-table-column align="center" prop="remark" label="建议尺寸" />

          <el-table-column align="center" label="展示图">
            <template slot-scope="scope">
              <img :src="scope.row.img" width="50px" height="50px">
            </template>
          </el-table-column>

          <el-table-column align="center" prop="updateTime" label="修改时间" />

          <el-table-column align="center" prop="createTime" label="创建时间" />

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button title="修改" type="primary" circle class="table-icon " icon="el-icon-edit" @click="edit(scope.row)" />
            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogState" :before-close="handleClose" top="5vh" width="60%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="" class="three">
            <photo-gallery
              v-if="isInit"
              ref="photoGallery"
              :type="type"
              :editor-data="editorData"
              :check-status="checkIndexStatus"
              :check-id="checkIdValue"
              @emitSuccess="iconData"
              @deleteSuccess="deleteIconData"
              @checkSuccess = "iconCheckData"
              @checkId = "checkIdData"
              @clickIndex="checkPicData"/>
          </el-form-item>
          <div class="btns-wrapper">
            <el-button size="small" @click="handleClose">取 消</el-button>
            <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
          </div>
        </div>
      </el-form>

    </el-dialog>
  </div>
</template>
<script>
import * as picture from '../../api/picture.js'
import photoGallery from '../../views/picture/component/editIcon'
export default {
  components: {
    photoGallery
  },
  data() {
    return {
      isInit: true,
      // 页面搜索
      seacherParam: {
        searchPlace: ''
      },
      searchShow: false,
      // 列表数据
      dataOption: null,
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      dialogTitle: '编辑信息',
      dialogBindData: {

      },
      photoGallery: [],
      rules: {

      },
      type: '',
      dialogState: false,
      editorData: null,
      // 按钮状态
      buttonState: false,
      delBtn: true,
      delIdArr: [],
      checkId: {},
      checkIcon: '',
      checkIndex: -1,
      checkIndexStatus: false,
      checkIdValue: ''
    }
  },
  beforeMount() {
    // 	  this.type = this.$route.params.type // 类型
    // 	  this.editorData = this.$route.params.data // 编辑数据

    this.getList()
  },

  methods: {
    seachFun() {
      const param = {
        current: 1,
        size: this.pageSize,
        sellerName: this.seacherParam.sellerName
      }
      picture.iconList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    // 重置
    resetFun() {
      this.$refs.seacherParam.resetFields()
      this.pageNo = 1
      this.pageSize = 10
      this.getList()
    },
    // 删除
    changeFun(data) {
      this.datavalID = data
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.getList()
    },
    handleClose() {
      for (const key in this.dialogBindData) {
        if (key === 'sellerType') {
          this.dialogBindData[key] = 1
        } else if (key === 'settlementPeriod') {
          this.dialogBindData[key] = 1
        } else {
          this.dialogBindData[key] = ''
        }
      }
      this.dialogState = false
      this.disabled = false
      this.disableIinput = false
      this.isInit = false
      // this.$refs.dialogBindData.clearValidate()
    },
    // 查询列表数据
    getList() {
      const param = {
        current: this.pageNo,
        size: this.pageSize
      }
      picture.iconList(param).then(res => {
        console.log('查询图片列表的结果')
        console.log(res)
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    // 编辑
    edit(data) {
      this.dialogState = true
      this.disabled = true
      this.isInit = true
      this.checkId = data.id
    },

    iconData(data) {
      console.log('接收到的数据：' + data)
      this.photoGallery.push(data)
      console.log('选择的图片数据：')
      console.log(this.photoGallery)
    },

    checkPicData(data) {
      console.log('checkIndex', data)
      this.checkIndex = data
    },

    deleteIconData(data) {
      console.log('接收到的要删除的数据：')
      console.log(data)
      this.photoGallery = data
      console.log('将要删除的图片的数据：')
      console.log(this.photoGallery)
    },

    iconCheckData(data) {
      console.log('接收到的选中的数据：')
      this.checkIcon = data
    },
    checkIdData(data) {
      this.checkIdValue = data
      console.log('接收到的ID：' + data)
    },
    submmitFun() {
      console.log(this.checkIndex)
      //       if (this.checkIndex === -1) {
      //         this.$message({
      //           message: '请选择展示图',
      //           type: 'warning'
      //         })
      //         return false
      //       }

      console.log('当前iconList数据集合：')
      console.log(this.photoGallery)
      this.$refs.dialogBindData.validate((valid) => {
        if (valid) {
          let params = []
          for (const i in this.photoGallery) {
            if (this.photoGallery[i].id) {
              console.log(this.photoGallery[i].id)
              params.push(this.photoGallery[i].id)

              picture.deleteIcon(params).then(res => {
                console.log('删除图库的结果：')
                console.log(res)
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }

                this.buttonState = false
                this.getList()
                this.handleClose()
              })
            } else {
              params = {
                'img': this.photoGallery[i]
              }

              picture.addIcon(params).then(res => {
                console.log('添加图库的结果：')
                console.log(res)
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }

                this.buttonState = false
                this.getList()
                this.handleClose()
                this.photoGallery = []
              })
            }
          }
          this.buttonState = false
          this.getList()
          this.handleClose()

          console.log('当前修改的iconurl:')
          console.log(this.checkIcon)
          if (this.checkId !== '' && this.checkIcon !== '') {
            console.log('当前数据的ID是：' + this.checkId)
            params = {
              'id': this.checkId,
              'img': this.checkIcon
            }
            picture.updateIcon(params).then(res => {
              console.log('修改图片的结果：')
              console.log(res)
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }

              this.buttonState = false
              this.getList()
              this.handleClose()
              this.checkIndex = -1
            })
          }
        } else {
          return false
        }
      })
    }

  }
}
</script>
<style>

</style>
